<%@include file="startUpIncludes.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>
            Register As Employee
        </title>
    <script type="text/javascript" src="../js/validation.js">
    </script>
    <script type="text/javascript" src="../js/validationEmpRegister.js">
    </script>
    </head>
    <body>
	<jsp:include page="header.jsp" >
		<jsp:param value="false" name="loggedIn"/>
	</jsp:include>
    <div class="wrap">
	<div class="fitBG">
        <div class="header">
        <div class="header-top">
            <div class="log">
                <a href="login">Sign In</a>
                <a href="#">Sign Up</a>
            </div>
        </div>
        <div class="top-menu">
            <a href="#" class="active">Home</a>
            <a href="#">About Us</a>
            <a href="#">Services</a>
            <a href="#">Solutions</a>
            <a href="#">Contacts</a>
            <a href="#">Company</a>
        </div>
        </div>
        <div class="main">
            <div class="already-login reg"><span>Already Registered? </span><a href="login" class="imp">Sign In</a></div>
        <div class="reg-box">
            <form:form class="reg-form" method="post" action="/sales/s/empRegister"  commandName="empRegister" autocomplete="off" >
            	<form:errors cssStyle="color:red" path="*"></form:errors>
                <label>First Name: <span class="required">*</span></label>
                <form:input type="text" class="TB" id="fName" path="fName" />
                <label>Last Name: <span class="required">*</span></label>
                <form:input type="text" class="TB" id="lName" path="lName" />
                <label>Email: <span class="required">*</span></label>
                <form:input type="text" class="TB" id="email" path="email" />
                <label>Username: <span class="required">*</span></label>
                <form:input type="text" class="TB" id="username" path="username" />
                <label>Company: <span class="required">*</span></label>
                <form:input type="text" class="TB" id="company" path="company" />
                <label>Country: <span class="required">*</span></label>
                <form:select class="TB" id="country" path="country" >
					<c:forEach var="country" items="${countries}">
								<form:option value="${country.id}">${country.countryName}</form:option>
					</c:forEach>
				</form:select>
                <label>Job Title: <span class="required">*</span></label>
				<form:select class="TB" id="jobTitle" path="jobTitle" >
				<option>-- None --</option>
				<c:forEach var="jobTitle" items="${jobTitles}">
				<form:option value="${jobTitle.id}">${jobTitle.name}</form:option>
				</c:forEach>
				</form:select>
                <input type="checkbox" class="chbox" name="chbox" id = "chbox" value="${agree}"/>
                
                <label>I have read and agree</label><a href="#" class="terms">The terms of use</a>
                <input type="submit" value="Sign Up" class="form-btn reg-btn" />
            </form:form>
            <div class="valid">
            <div class="valid-line"><span class="done"></span><span class="error-msg f-name-error">First name is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg l-name-error">Last name is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg reg-email-error">Please enter a valid email.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg username-error">Username is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg reg-company-error">Company name is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg country-error">Company location is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg job-title-error">Job title is required.</span></div>
            <div class="valid-line"><span class="done"></span><span class="error-msg check-terms-error" style="display:block; visibility: hidden;;">You have to check terms</span></div>
            
            </div>
        </div>
        </div>
        
    <%@include file="footer.jspf" %>
    </div>
	</div>
    

    </body>
</html>